<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>slot</title>

  <!-- 
        slot用于父组件向子组件传递'标签数据'    

        1. template中没有包含一个<slot>元素，则组件起始标签和结束标签之间的任何内容都会被抛弃
        2. 父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的
        3. slot是可以设置默认值的，它只会在没有提供内容的时候被渲染
        4. slot的name属性的默认值是default
        5. 插槽prop

            绑定在<slot>元素上的属性被称为插槽属性，在父级作用域中，可以使用带值的v-slot来定义包含所有插槽属性的对象名
              <span>
                <slot v-bind:user="user">
                  {{ user.lastName }}
                </slot>
              </span>
            
            在父级作用域中使用插槽属性， slotPorps是包含所有插槽属性的对象
              <current-user>
                <template v-slot:default="slotProps">
                  {{ slotProps.user.firstName }}
                </template>
              </current-user>


            只要出现多个插槽，请始终为所有的插槽使用完整的基于<template>的语法
              <current-user>
                <template v-slot:default="slotProps">
                  {{ slotProps.user.firstName }}
                </template>

                <template v-slot:other="otherSlotProps">
                  ...
                </template>
              </current-user>

          
          6. 解构插槽prop
                <current-user v-slot="{ user }">
                  {{ user.firstName }}
                </current-user>   
                
                // 将user重命名为person
                <current-user v-slot="{ user: person }">
                  {{ person.firstName }}
                </current-user>


                // 定义默认值，用于插槽prop是undefined的情形
                <current-user v-slot="{ user = { firstName: 'Guest' } }">
                  {{ user.firstName }}
                </current-user>


          7. 动态插槽名
              <base-layout>
                <template v-slot:[dynamicSlotName]>
                  ...
                </template>
              </base-layout>



          8. 具名插槽的缩写，v-slot:header可以重写为#header
              <base-layout>
                <template #header>
                  <h1>Here might be a page title</h1>
                </template>

                <p>A paragraph for the main content.</p>
                <p>And another one.</p>

                <template #footer>
                  <p>Here's some contact info</p>
                </template>
              </base-layout>

              // 这里必须明确插槽名，default也不能省略
              <current-user #default="{ user }">
                {{ user.firstName }}
              </current-user>

   -->
</head>

<body>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 没有指定name属性的值，所以它的值是默认值default -->
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>


  <base-layout>
    <!-- 向具名插槽提供内容的时候，在<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称 -->
    <template v-slot:header>
      <!-- 此处替换 <slot name="header"></slot>  -->
      <h1>Here might be a page title</h1>
    </template>

    <!-- 没有包裹在带有v-slot指令的<template>中的内容都会被视为默认插槽的内容  -->
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template v-slot:footer>
      <!-- 此处替换 <slot name="footer"></slot> -->
      <p>Here's some contact info</p>
    </template>
  </base-layout>

  <base-layout>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>

    <!-- 更明确的写法 -->
    <template v-slot:default>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </template>

    <template v-slot:footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>

</body>



</html>